<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>七牛云CDN静态资源使用教程</title>
	<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdn.bootcss.com/iview/2.13.1/iview.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/iview/2.13.1/styles/iview.css" />
</head>
<body>
	<div id="app">
		<Card title="七牛云CDN静态资源引用查询" icon="navicon-round">
			
			<Tabs type="card" @on-click="switchTab">
		        <Tab-Pane v-for="tab in typeList" :key="tab" :name="tab.name" :label="tab.name">
		        	<i-input type="textarea" :value="demo" :autosize="{minRows: 3}"></i-input>
		        	<Radio-Group  v-model="checked" vertical size="large" style="margin: 20px;" @on-change="updateVersion">
		        		<Radio style="font-size: 20px;" v-for="ver in tab.version" :label="ver">
		        	</Radio-Group>
		        </Tab-Pane>
		    </Tabs>
			
		</Card>
	</div>
	<script type="text/javascript">
		let app = new Vue({
			el:"#app",
			data:{
				checked:'2.5.16',
				demo:'',
				name:'vue',
				theme:[],
				typeList:[
					{
						name:'vue',
						version:['2.5.16']
					},
					{
						name:'iview',
						version:['2.13.1','2.13.0']
					},
					{
						name:'jquery',
						version:['3.2.1']
					},
					{
						name:'echarts',
						version:['4.0.4'],
						themes:['macarons.js','customed.js','chalk.js','dark.js','essos.js','halloween.js','infographic.js','purple-passion.js','roma.js','shine.js','vintage.js','walden.js','westeros.js','wonderland.js']
					}
				]
			},
			mounted(){
				this.switchTab('vue')
			},
			methods:{
				switchTab(name){
					this.typeList.forEach(item=>{
						if (item.name===name) {
							this.name = name
							this.theme = item.themes
							this.updateVersion(item.version[0])
							return
						}
					})
				}
				,updateVersion(val){
					this.checked=val
					this.updateText()
				}
				,updateText(){
					let stext = '<script type="text/javascript" src="http://static.xihc.xin/'+this.name+'/'+this.checked+'/'+this.name+'.min.js" ><'+'/script>\r'
					if(this.name == 'iview'){
						stext += '<link rel="stylesheet" type="text/css" href="http://static.xihc.xin/'+this.name+'/'+this.checked+'/styles/'+this.name+'.css" />\r'
					} else if (this.name == 'echarts'){
						stext += '\r主题：'+this.theme+'\r<script type="text/javascript" src="http://static.xihc.xin/'+this.name+'/themes/'+'${theme}" ><'+'/script>\r'
					}
					this.demo = stext
				}
			}
		})
	</script>
</body>

</html>